
<script setup>
	
	import { ref } from 'vue';
	
	
	/** props */
	const props = defineProps({
		list: {
			type: Array,
			default: () => ([])
		}
	});
	
	const emit = defineEmits(['callback'])
	
	
	/** 当前选择的 id */
	const activeId = ref()
	
	/** 选择关卡时 */
	function handleDetail(id, index) {
		activeId.value = id;
		emit('callback')
	};
	
	
	/** 向外暴露 */
	defineExpose({
		activeId
	});


</script>

<template>
	<view class="box">
		<view v-for="item, index in list" class="item" :class="{ actived: activeId === item.id }" @click="handleDetail(item.id)" :key="item.id">
			<view class="cons flex items-center flex-col">
				<view class="text-24 mb-5">关卡</view>
				<view class="text-34">{{ `${index + 1}`.padStart(2, '0') }}</view>
				<view class="close flex items-center justify-center" v-if="item.isLearned === 1">
					<uni-icons type="checkmarkempty" class="flex" size="10" color="#fff" />
				</view>
			</view>
		</view>
	</view>
</template>


<style lang="scss" scoped>
.box{ display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 10px;padding: 20rpx 30rpx}
.item{background:linear-gradient(180deg, #ECECED 86%, #DFDFE2 100%);border-radius: 12rpx;padding: 15rpx}
.cons{background-color: #F7F8FA;border-radius: 12rpx;padding: 15rpx 0;position: relative}
.item:active, .item.actived{background: linear-gradient(180deg, #FEC554 86%, #FEAC0C 100%); .cons{background-color: #FFF5E0}}
.close{position: absolute;right: -24rpx;top: -24rpx;width: 35rpx;height: 35rpx;background-color: #40d463;border-radius: 100%}
</style>